<template>
    <a-row>
        <!-- 左侧内容区域 -->
        <a-col :span="19">
            <div id="requirement" class="anchor-section" ref="requirementRef">
                <a-row :gutter="24" style="margin-top: 12px">
                    <a-col :span="24">
                        <a-card size="small" :bordered="false" :hoverable="true" class="requirement-card">
                            <a-table size="small" :columns="requirementColumns" :dataSource="requirementData"
                                :pagination="false" bordered>
                                <template #title><span style="color: #1890ff">表2 麻醉学各亚专业麻醉种类及例数要求*</span></template>
                            </a-table>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <!-- 基本麻醉技能要求表格 -->
            <div id="basic-skills" class="anchor-section" ref="basicSkillsRef">
                <a-row :gutter="24" style="margin-top: 12px">
                    <a-col :span="24">
                        <a-card size="small" :bordered="false" :hoverable="true">
                            <a-table size="small" :columns="basicSkillColumns" :dataSource="basicSkillData"
                                :pagination="false" bordered>
                                <template #title><span style="color: #1890ff">表3 基本麻醉技能要求</span></template>
                            </a-table>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <!-- 特殊麻醉技能要求表格 -->
            <div id="special-skills" class="anchor-section" ref="specialSkillsRef">
                <a-row :gutter="24" style="margin-top: 12px">
                    <a-col :span="24">
                        <a-card size="small" :bordered="false" :hoverable="true">
                            <a-table size="small" :columns="specialSkillColumns" :dataSource="specialSkillData"
                                :pagination="false" bordered>
                                <template #title><span style="color: #1890ff">表4 特殊麻醉技能要求</span></template>
                            </a-table>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <!-- ICU技能要求表格 -->
            <div id="icu-skills" class="anchor-section" ref="icuSkillsRef">
                <a-row :gutter="24" style="margin-top: 12px">
                    <a-col :span="24">
                        <a-card size="small" :bordered="false" :hoverable="true">
                            <a-table size="small" :columns="icuSkillColumns" :dataSource="icuSkillData"
                                :pagination="false" bordered>
                                <template #title><span style="color: #1890ff">表5 ICU技能要求</span></template>
                            </a-table>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <!-- 模拟培训相关课程表格 -->
            <div id="simulation" class="anchor-section" ref="simulationRef">
                <a-row :gutter="24" style="margin-top: 12px">
                    <a-col :span="24">
                        <a-card size="small" :bordered="false" :hoverable="true">
                            <a-table size="small" :columns="simulationTrainingColumns"
                                :dataSource="simulationTrainingData" :pagination="false" bordered>
                                <template #title><span style="color: #1890ff">表6 模拟培训相关课程</span></template>
                            </a-table>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <!-- 其他相关技能要求表格 -->
            <div id="other-skills" class="anchor-section" ref="otherSkillsRef">
                <a-row :gutter="24" style="margin-top: 12px">
                    <a-col :span="24">
                        <a-card size="small" :bordered="false" :hoverable="true">
                            <a-table size="small" :columns="otherSkillsColumns" :dataSource="otherSkillsData"
                                :pagination="false" bordered>
                                <template #title><span style="color: #1890ff">表7 其他相关技能要求</span></template>
                            </a-table>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
        </a-col>
        <!-- 右侧固定导航栏 -->
        <a-col :span="5" style="position: fixed; top: 80px; right: 20px; width: 300px;">
            <a-card size="small" :bordered="false" :hoverable="true" style="margin-top: 12px; max-height: calc(100vh - 100px); overflow-y: auto;">
                <a-anchor :targetOffset="targetOffset" @click="handleAnchorClick"
                    :activeLink="activeLink" :affix="false">
                    <a-anchor-link href="#requirement" title="表2 麻醉学各亚专业麻醉种类及例数要求" />
                    <a-anchor-link href="#basic-skills" title="表3 基本麻醉技能要求" />
                    <a-anchor-link href="#special-skills" title="表4 特殊麻醉技能要求" />
                    <a-anchor-link href="#icu-skills" title="表5 ICU技能要求" />
                    <a-anchor-link href="#simulation" title="表6 模拟培训相关课程" />
                    <a-anchor-link href="#other-skills" title="表7 其他相关技能要求" />
                </a-anchor>
            </a-card>
        </a-col>
    </a-row>
</template>

<script setup>
import { ref, h, onMounted, onBeforeUnmount, watch } from 'vue';
import { DatePicker } from 'ant-design-vue';
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
import { Progress as AProgress } from 'ant-design-vue';

// 导航相关配置
const targetOffset = ref(80);
const activeLink = ref(); // 默认激活链接

// 监听滚动事件,更新activeLink
const handleScroll = () => {
    const sections = document.querySelectorAll('.anchor-section');
    const scrollPosition = window.scrollY + targetOffset.value;
    const viewportHeight = window.innerHeight;
    
    // Find the section that is currently in view
    let currentSection = null;
    let maxVisiblePercent = 0;
    
    sections.forEach((section) => {
        const sectionTop = section.offsetTop;
        const sectionBottom = sectionTop + section.offsetHeight;
        const sectionHeight = section.offsetHeight;
        
        // Calculate visible percentage with buffer
        const visibleTop = Math.max(0, scrollPosition - sectionTop + 100);
        const visibleBottom = Math.min(sectionHeight, scrollPosition + viewportHeight - sectionTop - 100);
        const visibleHeight = visibleBottom - visibleTop;
        const visiblePercent = (visibleHeight / sectionHeight) * 100;
        
        // Track section with maximum visible percentage
        if (visiblePercent > maxVisiblePercent && visiblePercent > 30) {
            maxVisiblePercent = visiblePercent;
            currentSection = section;
        }
    });
    
    // Update active link if we found a current section
    if (currentSection && activeLink.value !== '#' + currentSection.id) {
        activeLink.value = '#' + currentSection.id;
        
        // Update active class with debounce
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
            const links = document.querySelectorAll('.ant-anchor-link');
            links.forEach(link => link.classList.remove('active'));
            const activeNavItem = document.querySelector(`a[href="#${currentSection.id}"]`);
            if (activeNavItem) {
                activeNavItem.classList.add('active');
                // Smooth scroll to active nav item
                activeNavItem.scrollIntoView({
                    block: 'nearest',
                    behavior: 'smooth'
                });
            }
        }, 100);
    }
};

let scrollTimeout = null;
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll);
});


// 表格列配置
const requirementColumns = ref([
    { title: '序号', dataIndex: 'key', width: 10 },
    { title: '要求', dataIndex: 'department', width: 100 },
    { title: '要求例数', dataIndex: 'count', width: 50, align: 'center' },
    {
        title: '完成进度',
        dataIndex: 'progress',
        width: 150,
        align: 'center',
        customRender: ({ text }) => h(AProgress, { percent: text, size: 'small' })
    }
]);

// 表格数据
const requirementData = ref([
    { key: '1', department: '普通外科麻醉', count: 120, note: '含烧伤', progress: 45 },
    { key: '2', department: '骨科与矫形外科麻醉', count: 50, progress: 30 },
    { key: '3', department: '泌尿外科麻醉', count: 40, progress: 60 },
    { key: '4', department: '神经外科', count: 40, note: '含体外循环', progress: 20 },
    { key: '5', department: '心血管外科麻醉', count: 15, note: '含体外循环', progress: 20 },
    { key: '6', department: '体外循环', count: 5, progress: 15 },
    { key: '7', department: '胸外科麻醉', count: 40, note: '含剖宫产', progress: 55 },
    { key: '8', department: '眼科与耳鼻咽喉科麻醉', count: 50, progress: 40 },
    { key: '9', department: '口腔与颌面外科麻醉', count: 20, progress: 70 },
    { key: '10', department: '妇产科麻醉', count: 80, note: '含剖宫产', progress: 55 },
    { key: '11', department: '剖宫产', count: 40, note: '含剖宫产', progress: 55 },
    { key: '12', department: '小儿麻醉', count: 60, note: '8岁以下', progress: 25 },
    { key: '13', department: '门诊和(或)手术室外麻醉', count: 100, progress: 50 },
    { key: '14', department: '麻醉恢复室(PACU)', count: 100, note: '含门诊', progress: 40 },
    { key: '15', department: '院内急救', count: 10, progress: 65 },
    { key: '16', department: '疼痛门诊和(或)病房', count: 50, progress: 60 },
    { key: '17', department: '急性疼痛治疗', count: 50, note: '含AICU收治病例', progress: 25 },
    { key: '18', department: '重症监护[含麻醉重症监护病房(AICU)收治病例]', count: 12, note: '含AICU收治病例', progress: 25 }
]);


// 基本麻醉技能要求表格配置
const basicSkillColumns = ref([
    { title: '序号', dataIndex: 'key', width: 10 },
    { title: '操作技术名称', dataIndex: 'name', width: 100 },
    { title: '最低例数', dataIndex: 'count', width: 50, align: 'center' },
    {
        title: '完成进度',
        dataIndex: 'progress',
        width: 150,
        align: 'center',
        customRender: ({ text }) => h(AProgress, { percent: text, size: 'small' })
    }
]);

const basicSkillData = ref([
    { key: '1', name: '气管插管全身麻醉', count: 300, progress: 0 },
    { key: '2', name: '椎管内麻醉', count: 50, progress: 0 },
    { key: '3', name: '外周神经阻滞', count: 50, progress: 0 },
    { key: '4', name: '监护麻醉管理(MAC)', count: 40, progress: 0 }
]);

// 特殊麻醉技能要求表格配置
const specialSkillColumns = ref([
    { title: '序号', dataIndex: 'key', width: 10 },
    { title: '技能操作名称', dataIndex: 'name', width: 100 },
    { title: '最低例数', dataIndex: 'count', width: 50, align: 'center' },
    {
        title: '完成进度',
        dataIndex: 'progress',
        width: 150,
        align: 'center',
        customRender: ({ text }) => h(AProgress, { percent: text, size: 'small' })
    }
]);

const specialSkillData = ref([
    { key: '1', name: '动脉穿刺置管与监测', count: 40, progress: 10 },
    { key: '2', name: '纤维支气管镜/可视插管软镜', count: 10, progress: 10 },
    { key: '3', name: '双腔支气管插管及对位', count: 10, progress: 10 },
    { key: '4', name: '经鼻气管插管', count: 4, progress: 10 },
    { key: '5', name: '中心静脉穿刺置管与监测', count: 20, progress: 10 },
    { key: '6', name: '喉罩', count: 30, progress: 10 },
    { key: '7', name: '自体血回输', count: 10, progress: 10 }
]);

// ICU技能要求表格配置
const icuSkillColumns = ref([
    { title: '序号', dataIndex: 'key', width: 10 },
    { title: '技术操作名称', dataIndex: 'name', width: 100 },
    { title: '最低例数', dataIndex: 'count', width: 50, align: 'center' },
    {
        title: '完成进度',
        dataIndex: 'progress',
        width: 150,
        align: 'center',
        customRender: ({ text }) => h(AProgress, { percent: text, size: 'small' })
    }
]);

const icuSkillData = ref([
    { key: '1', name: '呼吸机管理', count: 50, progress: 12 },
    { key: '2', name: '胸腔穿刺术', count: 1, progress: 13 },
    { key: '3', name: '腰椎穿刺术', count: 1, progress: 10 },
    { key: '4', name: '快速气管切开造口', count: 1, progress: 10 },
    { key: '5', name: '腹腔穿刺术', count: 1, progress: 10 }
]);

// 模拟培训相关课程表格配置
const simulationTrainingColumns = ref([
    { title: '序号', dataIndex: 'key', width: 10 },
    { title: '模拟培训相关课程名称', dataIndex: 'name', width: 100 },
    { title: '学时', dataIndex: 'hours', width: 50, align: 'center' },
    {
        title: '完成进度',
        dataIndex: 'progress',
        width: 150,
        align: 'center',
        customRender: ({ text }) => h(AProgress, { percent: text, size: 'small' })
    }
]);

const simulationTrainingData = ref([
    { key: '1', name: '心肺复苏', hours: 4, progress: 50 },
    { key: '2', name: '气管插管', hours: 2, progress: 30 },
    { key: '3', name: '环甲膜穿刺切开术', hours: 2, progress: 20 },
    { key: '4', name: '纤维支气管镜/可视插管软镜插管', hours: 2, progress: 40 },
    { key: '5', name: '动脉穿刺置管', hours: 2, progress: 60 },
    { key: '6', name: '中心静脉穿刺置管', hours: 2, progress: 70 },
    { key: '7', name: '椎管内麻醉', hours: 2, progress: 80 },
    { key: '8', name: '超声辅助定位神经阻滞', hours: 4, progress: 90 },
    { key: '9', name: '麻醉危机资源管理(6个基本病例)', hours: null, progress: 50 },
    { key: '10', name: '失血性休克', hours: 1, progress: 60 },
    { key: '11', name: '气胸', hours: 1, progress: 70 },
    { key: '12', name: '意外困难气道', hours: 1, progress: 80 },
    { key: '13', name: '饱胃患者的快速顺序诱导', hours: 1, progress: 90 },
    { key: '14', name: '过敏性休克', hours: 1, progress: 100 },
    { key: '15', name: '手术室内意外应急反应', hours: 1, progress: 50 }
]);

// 其他相关技能要求表格配置
const otherSkillsColumns = ref([
    { title: '序号', dataIndex: 'key', width: 10 },
    { title: '技术操作名称', dataIndex: 'name', width: 100 },
    { title: '最低例数', dataIndex: 'count', width: 50, align: 'center' },
    {
        title: '完成进度',
        dataIndex: 'progress',
        width: 150,
        align: 'center',
        customRender: ({ text }) => h(AProgress, { percent: text, size: 'small' })
    }
]);

const otherSkillsData = ref([
    { key: '1', name: '心电图读图', count: 50, progress: 50 },
    { key: '2', name: '住院病历书写', count: 30, progress: 60 },
    { key: '3', name: 'X线/CT/MR读片', count: 50, progress: 70 },
    { key: '4', name: '手工填写麻醉记录单及其他围术期相关表单', count: 5, progress: 80 }
]);

const handleAnchorClick = (e, link) => {
    e.preventDefault();
    activeLink.value = link.href;
    const targetElement = document.querySelector(link.href);
    if (targetElement) {
        targetElement.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
        
        // Add active class to clicked link
        const links = document.querySelectorAll('.ant-anchor-link');
        links.forEach(link => link.classList.remove('active'));
        e.target.classList.add('active');
    }
};



</script>

<style scoped lang="less">
.header {
    width: 100%;
    background-color: #fff;
    
}

.plan-card,
.requirement-card {
    height: 100%;
}

.anchor-section {
    scroll-margin-top: 80px;
    scroll-behavior: smooth;
  
}

/* 导航栏样式 */
.ant-anchor-link {
    padding: 8px 0;
    transition: all 0.3s;
}

.ant-anchor-link.active {
    color: #1890ff;
    font-weight: bold;
}

/* 防止内容被导航栏遮挡 */
#requirement {
    padding-top: 100px;
    margin-top: -100px;
}
</style>
